import Image from 'next/image'
import { Dispatch, SetStateAction } from 'react'

import successIcon from '@/public/success_icon.png'
import xmarkIcon from '@/public/xmark_gray_fill.png'

interface ModalProps {
  setIsOpen: Dispatch<SetStateAction<boolean>>
  title: string
  content: string
}

const Modal: React.FC<ModalProps> = (props) => {
  const { setIsOpen, title, content } = props
  return (
    <div className='z-9999 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full px-[0.9375rem]'>
      <div className='relative flex flex-col items-center bg-white rounded-[0.9375rem] lg:mx-auto lg:w-[24rem] 2xl:w-[36rem]'>
        <div className='absolute top-[1.15625rem] right-[1.15625rem] w-[1.15625rem] h-[1.15625rem] 2xl:top-[1.734275rem] 2xl:right-[1.734375rem] 2xl:w-[1.734275rem] 2xl:h-[1.734275rem]'>
          <Image
            src={xmarkIcon}
            alt='xmark icon'
            fill
            sizes='(max-width: 1024px) 4vw'
          />
        </div>
        <div className='h-[2.90625rem] 2xl:h-[4.349375rem]' />
        <div className='relative w-[4.625rem] h-[4.34375rem] 2xl:w-[6.9375rem] 2xl:h-[6.515625rem]'>
          <Image
            src={successIcon}
            alt='success icon'
            fill
            sizes='(max-width: 1024px) 20vw'
            placeholder='blur'
          />
        </div>
        <div className='h-[1.65625rem] 2xl:h-[2.484375rem]' />
        <div className='text-[1rem] leading-[1.4rem] font-bold 2xl:text-[1.5rem] 2xl:leading-[2.1rem]'>
          {title}
        </div>
        <div className='h-[1.65625rem] 2xl:h-[2.484375rem]' />
        <div className='text-center text-[#999999] text-[0.875rem] leading-[1.3rem] font-medium mx-4 2xl:mx-6 2xl:text-[1.3125rem] 2xl:leading-[1.95rem]'>
          {content}
        </div>
        <div className='h-[3.25rem] 2xl:h-[4.875rem]' />
      </div>
    </div>
  )
}

export default Modal
